<template>
    <div class="concern">
        <nav-bar>我的关注</nav-bar>
          <div class="top">
            <div class="bar" v-for="v in detailList" :key="v.collect_id">
                <img :src="v.avatar" alt="">
                <span> {{ v.teacher_name }} -{{ v.introduction}}</span>
                <div class="gz"  @click="collectFn(v.teacher_id)">取消关注</div>
            </div>
            <img src="../../public/images/empty.png" alt="" v-if="total==0">
          </div>
        
    </div>
</template>

<script>
import { getTearchCollect1, getTearchCollect } from "../http/teach"
export default {
    data() {
        return {
            detailList:[],
            type:2,
            page:1,
            limit:10,
            total:""
        }
    },
    mounted() {
        this.getTearchCollect1()
    },
    methods:{
        async getTearchCollect1(){
            let res = await getTearchCollect1({ page: this.page, limit: this.limit,type: this.type })
            console.log(res);
            this.detailList=res.data.list
            this.total=res.data.total
        },
        async collectFn(id) {
            let res = await getTearchCollect(id)
            this.getTearchCollect1()
        }
    
    }
}
</script>

<style lang="scss" scoped>
img{
   display: block;
    margin: 50px auto;
}
.concern{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.top{
    margin-top: 60px;
    width: 100vw;
    height: 100vh;
}
.bar {
    width: 90vw;
    margin-left: 5vw;
    margin-bottom: 10px;
    background-color: #fff;
    line-height: 120px;
    font-size: 12px;
    color: #999;
    border-radius: 10px;

    img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        vertical-align: middle;
    }

    span {
        margin-right: 140px;
    }

    .gz {
        width: 100px;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        color: orange;
        background-color: #ebefff;
    }
}
</style>
